<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
        integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
    </script>
</head>

<body>


    <div>

        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"
                    data-toggle="tab">表单</a></li>
            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">购物车</a></li>
        </ul>

        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="home">
                <div style="width:200px;margin-left:50px;margin-top:30px;" class="tab-pane active">
                    昵称：<span></span>
                    <input class="form-control" id="disabledInput" type="text">
                    姓名：<span></span>
                    <input class="form-control" id="disabledInput" type="text">
                    手机号码：<span></span>
                    <input class="form-control" id="disabledInput" type="text">
                    邮箱：<span></span>
                    <input class="form-control" id="disabledInput" type="text">
                    密码：<span></span>
                    <input class="form-control" id="disabledInput" type="password">
                    确认密码：<span></span>
                    <input class="form-control" id="disabledInput" type="password">
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="profile">
                <div>
                    <h2 style="text-align: center;">真划算</h2>
                    <table class="table table-striped" style="width: 800px;margin: auto;border: 1px solid green;">
                        <thead>
                            <th>商品</th>
                            <th>单价（元）</th>
                            <th>颜色</th>
                            <th>库存</th>
                            <th>操作</th>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1TB肾13</td>
                                <td>9000</td>
                                <td>远峰蓝</td>
                                <td>8888</td>
                                <td><button>加入购物车</button></td>
                            </tr>
                            <tr>
                                <td>1TB肾12</td>
                                <td>8000</td>
                                <td>远峰蓝</td>
                                <td>8888</td>
                                <td><button>加入购物车</button></td>
                            </tr>
                            <tr>
                                <td>1TB肾11</td>
                                <td>7000</td>
                                <td>远峰蓝</td>
                                <td>8888</td>
                                <td><button>加入购物车</button></td>
                            </tr>
                            <tr>
                                <td>1TB肾14PLUS</td>
                                <td>12000</td>
                                <td>远峰蓝</td>
                                <td>8888</td>
                                <td><button>加入购物车</button></td>
                            </tr>
                        </tbody>
                    </table>
                    <h2 style="text-align: center;">购物车</h2>
                    <table class="table table-striped" style="width: 800px;margin: auto;">
                        <thead>
                            <th>商品</th>
                            <th>单价（元）</th>
                            <th>数量</th>
                            <th>金额（元）</th>
                            <th>删除</th>
                        </thead>
                        <tbody>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td>总价</td>
                                <td id='td1'></td>
                            </tr>
                        </tbody>

                    </table>
                </div>
            </div>
        </div>
    </div>



</body>
<script>
    $(function () {
        $('table:eq(0) button').click(function () {
            $(this).parent().prev().html($(this).parent().prev().html() - 1)
            // 单价
            var str = $(this).parent().prev().prev().prev().html()
            // 商品
            var str1 = $(this).parent().prev().prev().prev().prev().html()
            str2 = `<tr>
                        <td>${str1}</td>
                        <td>${str}</td>
                        <td><button onclick='jian(this)'>-</button><i>1</i><button onclick='jia(this)'>+</button></td>
                        <td class='sp1'>${str}</td>
                        <td><button onclick='fun(this)'>×</button></td>
                </tr>
            `
            var arr1 = $('table:eq(1) tbody td')
            for (i in arr1) {
                if (str1 == $(arr1).eq(i).html()) {
                    $(arr1).eq(i).next().next().children().eq(1).html(+$(arr1).eq(i).next().next()
                        .children().eq(1).html() + 1)
                    $(arr1).eq(i).next().next().next().html(+$(arr1).eq(i).next().next().children().eq(
                        1).html() * +$(arr1).eq(i).next().html())
                    // 总价
                    var arr = 0
                    var asd = $('.sp1')
                    for (var i = 0; i < asd.length; i++) {
                        arr += +$(asd[i]).html()
                    }
                    $('#td1').html(arr)
                    arr = 0
                    return
                }
            }
            $('table:eq(1) tbody').prepend(str2)
            // 总价
            var arr = 0
            var asd = $('.sp1')
            for (var i = 0; i < asd.length; i++) {
                arr += +$(asd[i]).html()
            }
            $('#td1').html(arr)
            arr = 0
        })






        // 昵称
        $('div input:eq(0)').keyup(function () {
            var reg = /^[a-zA-Z]{1}[A-Z|a-z|0-9]{5,}/;
            if (reg.test($(this).val())) {
                $('span:eq(0)').html('√')
                $('span:eq(0)').css({
                    color: 'green'
                })
            } else {
                $('span:eq(0)').html('输入不符合规则')
                $('span:eq(0)').css({
                    color: 'red'
                })
            }
        })
        // 姓名
        $('div input:eq(1)').keyup(function () {
            if ($(this).val()) {
                $('span:eq(1)').html('√')
                $('span:eq(1)').css({
                    color: 'green'
                })
            } else {
                $('span:eq(1)').html('输入不符合规则')
                $('span:eq(1)').css({
                    color: 'red'
                })
            }
        })
        // 手机号
        $('div input:eq(2)').keyup(function () {
            var reg = /^[1][3-9][0-9]{9}$/;
            if (reg.test($(this).val())) {
                $('span:eq(2)').html('√')
                $('span:eq(2)').css({
                    color: 'green'
                })
            } else {
                $('span:eq(2)').html('输入不符合规则')
                $('span:eq(2)').css({
                    color: 'red'
                })
            }
        })
        // 邮箱
        $('div input:eq(3)').keyup(function () {
            var reg = /^([0-9|a-z]*)@([a-z|0-9]*)(.*)([A-z])/;
            if (reg.test($(this).val())) {
                $('span:eq(3)').html('√')
                $('span:eq(3)').css({
                    color: 'green'
                })
            } else {
                $('span:eq(3)').html('输入不符合规则')
                $('span:eq(3)').css({
                    color: 'red'
                })
            }
        })
        // 密码
        $('div input:eq(4)').keyup(function () {
            var reg = /[\d]*[A-Za-z]+[0-9]*/;
            if (reg.test($(this).val())) {
                $('span:eq(4)').html('√')
                $('span:eq(4)').css({
                    color: 'green'
                })
            } else {
                $('span:eq(4)').html('输入不符合规则')
                $('span:eq(4)').css({
                    color: 'red'
                })
            }
        })
        // 确认密码
        $('div input:eq(5)').keyup(function () {
            if ($(this).val() == $('div input:eq(4)').val()) {
                $('span:eq(5)').html('√')
                $('span:eq(5)').css({
                    color: 'green'
                })
            } else {
                $('span:eq(5)').html('输入不符合规则')
                $('span:eq(5)').css({
                    color: 'red'
                })
            }
        })
    })
    // 数量减
    function jian(obj) {
        // 最小值为1时
        var miN = $(obj).next().html()
        var pri = $(obj).parent().next().html()
        // 获取商品名称
        var names = $(obj).parents('tr').children().first().html()
        if (miN == 1) {
            return
        } else {
            $(obj).next().html(+$(obj).next().html() - 1)
            $(obj).parent().next().html(+$(obj).parent().prev().html() * +$(obj).next().html())
            var arr1 = $('table:eq(0) tbody td')
            for (i in arr1) {
                if ($(arr1).eq(i).html() == names) {
                    $(arr1).eq(i).next().next().next().html(+$(arr1).eq(i).next().next().next().html() + 1)
                }
            }
        }
        // 总价
        var arr = 0
        var asd = $('.sp1')
        for (var i = 0; i < asd.length; i++) {
            arr += +$(asd[i]).html()
        }
        $('#td1').html(arr)
        arr = 0
    }
    // 数量加
    function jia(obj) {
        var miN = $(obj).prev().html()
        var names = $(obj).parents('tr').children().first().html()

        $(obj).prev().html(+$(obj).prev().html() + 1)
        $(obj).parent().next().html(+$(obj).parent().prev().html() * +$(obj).prev().html())
        var arr1 = $('table:eq(0) tbody td')
        for (i in arr1) {
            if ($(arr1).eq(i).html() == names) {
                $(arr1).eq(i).next().next().next().html(+$(arr1).eq(i).next().next().next().html() - 1)


            }
        }
        // 总价
        var arr = 0
        var asd = $('.sp1')
        for (var i = 0; i < asd.length; i++) {
            arr += +$(asd[i]).html()
        }
        $('#td1').html(arr)
        arr = 0
    }

    // 删除
    function fun(obj) {
        var price = $(obj).parent().prev().prev().prev().html()
        $(obj).parents('tr').remove()
        var num = $(obj).parent().prev().prev().children().eq(1).html()
        var arr = $('table:eq(0) td')
        for (i in arr) {
            if (price == $(arr).eq(i).html()) {
                $(arr).eq(i).next().next().html(+$(arr).eq(i).next().next().html() + +num)
            }
        }
        var arr = 0
        var asd = $('.sp1')
        for (var i = 0; i < asd.length; i++) {
            arr += +$(asd[i]).html()
        }
        $('#td1').html(arr)
        arr = 0
    }
</script>

</html>